<!DOCTYPE html>
<html>
<head>
<title>Simple Jquery Bootstrap Validation Plugin</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css">
<style>
<!-- overrides bootstrap styles  -->
.has-error .form-control {
 border-color: #ed5565;
}
.has-error > .form-control {
	box-shadow: 0 0 4px #ed5565;
	outline: 0 none;
}
.text-danger {
	color: #ed5565;
}
h4 {
	color: #888 !important;
}
<!--  page styles -->





</style>
</head>
<body class='container'>
<div class='row' >
  <div class='col-md-12 thumbnail'>
    <h4> All fields are required in this form</h4>
    <div class="form-group col-md-6 ">
      <label class=" control-label"> Select <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <select class='form-control required'>
          <option value='0'>Select an option</option>
          <option value='1'>One</option>
          <option value='2'>Two</option>
          <option value='3'>Three</option>
        </select>
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Email <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <input type="text" placeholder="Enter email " class="form-control required email" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Mobile <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <input type="text" placeholder="Enter  10 digit mobile number " class="form-control required mobile" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Digits only <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <input type="text" placeholder="Enter only digits " class="form-control required digits " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label" > Input Group <span style="color: #db0c1d;">*</span></label>
      <div class="input-group"> <span class="input-group-addon">$</span>
        <input type="text" class="form-control required">
        <span class="input-group-addon">.00</span> </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Characters Only <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <input type="text" placeholder="Enter  characters only " class="form-control required chars " />
      </div>
    </div>
    <hr/>
    <input type="button" id="btnClear" class="btn  btn-primary btn-clear" value="Clear Required Form" />
    <input type="button" id="btnSubmit" class="btn btn-success btn-click" value="Submit Required Form" />
  </div>
</div>
  <div class='row'>
    <div class='col-md-12  thumbnail' >
    <h4> All fields are not required but validated against their formats in this form</h4>
    <div class="form-group col-md-6">
      <label class=" control-label"> Select</label>
      <div class="">
        <select class='form-control '>
          <option value='0'>Select an option</option>
          <option value='1'>One</option>
          <option value='2'>Two</option>
          <option value='3'>Three</option>
        </select>
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Range</label>
      <div>
        <input type="text" min='1' max='10' class="form-control range" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Email</label>
      <div class="">
        <input type="text" placeholder="Enter email " class="form-control  email" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Password</label>
      <div class="">
        <input type="password" placeholder="Enter  password " id='password' class="form-control  password " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Password Again</label>
      <div>
        <input type="password" placeholder="Enter  password  again" data-match='password'
                        class="form-control   " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Mobile</label>
      <div class="">
        <input type="text" placeholder="Enter  10 digit mobile number " class="form-control  mobile" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Digits only</label>
      <div class="">
        <input type="text" placeholder="Enter only digits " class="form-control  digits " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Characters Only</label>
      <div class="">
        <input type="text" placeholder="Enter  characters only " class="form-control  chars " />
      </div>
    </div>
    <hr/>
    <input type="button" id="btnClear" class="btn  btn-primary btn-clear" value="Clear Not Required Form" />
    <input type="button" id="btnSubmit" class="btn btn-success btn-click" data-return="alert('data-return is defined here..');" value="Submit Not Required Form" />
    <p class='help-block'> You'll Get An Alert After Clicking Submit Button(alert is defined in data-return attribute)</p>
  </div>

  </div>

<div class='row'>
  <div class='col-md-12 thumbnail'>
    <h4> Form with required and non-required fields</h4>
    <div class="form-group col-md-6">
      <label class=" control-label"> Characters Only <span style="color: #db0c1d;">*</span></label>
      <div class="">
        <input type="text" placeholder="Enter  characters only " class="form-control  chars required " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Characters Only</label>
      <div class="">
        <input type="text" placeholder="Enter  characters only " class="form-control  chars " />
      </div>
    </div>
    <input type="button" id="btnClear" class="btn  btn-primary btn-clear"
                        value="Clear Semi Required Form" />
    <input type="button" id="btnSubmit" class="btn btn-success btn-click" value="Submit Semi Required Form" />
  </div>
</div>
<div class='row'> <div class='col-md-12  thumbnail'  >
    <h4> Date Picker Validation (Yesterday,Today,Tomorrow )</h4>
    <p class='help-block'> Date Picker From <a href='https://github.com/eternicode/bootstrap-datepicker'>Bootstrap
      Date Picker</a> </p>
    <div class="form-group col-md-6">
      <label class=" control-label"> Select Past Date Till Today </label>
      <div class="">
        <input type="text" placeholder="Select Past Date Till Today" class="form-control datepicker past " />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Select Today's Date</label>
      <div class="">
        <input type="text" placeholder="Select Today's Date" class="form-control datepicker today" />
      </div>
    </div>
    <div class="form-group col-md-6">
      <label class=" control-label"> Select Future Date From Today </label>
      <div class="">
        <input type="text" placeholder="Select Future Date From Today" class="form-control datepicker future" />
      </div>
    </div>
    <input type="button" id="btnClear" class="btn  btn-primary btn-clear" value="Clear Date Form" />
    <input type="button" id="btnSubmit" class="btn btn-success btn-click" value="Submit Date Form" />
  </div>
  </div>

  <div class='row'>
  
   <div class='col-md-12 thumbnail'>
  <div class='form-group col-md-6'>
  <p class='help-block'>here data-min is greater than data-max.</p>
    <div class=' mandatory-cb' data-min='3' data-max='2'>
      <label class="">
        <input type="checkbox" id="inlineCheckbox1" value="option1">
        1 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox2" value="option2">
        2 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox3" value="option3">
        3 </label>
    </div>
    </div>
      <div class='form-group col-md-6'>
  <p class='help-block'>Select Minimum 2 Check-box</p>
    <div class=' mandatory-cb' data-min='2' >
      <label class="">
        <input type="checkbox" id="inlineCheckbox1" value="option1">
        1 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox2" value="option2">
        2 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox3" value="option3">
        3 </label>
    </div>
    </div>
      <div class='form-group col-md-6'>
  <p class='help-block'>Select Maximum 2 Check-boxes</p>
    <div class=' mandatory-cb'  data-max='2'>
      <label class="">
        <input type="checkbox" id="inlineCheckbox1" value="option1">
        1 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox2" value="option2">
        2 </label>
      <label class="">
        <input type="checkbox" id="inlineCheckbox3" value="option3">
        3 </label>
    </div>
    </div>
    <div class="form-group col-md-6">
    <p class='help-block'>Select The Radio Button.(required field)</p>
    <div  class='mandatory-radio'>
      <label class=" ">
        <input type="radio" name="inlineRadioOptions"  id="inlineRadio1" value="option1">
        1 </label>
      <label class="">
        <input type="radio" name="inlineRadioOptions"  id="inlineRadio2" value="option2">
        2 </label>
      <label class="">
        <input type="radio" name="inlineRadioOptions"  id="inlineRadio3" value="option3">
        3 </label>
    </div>
    </div>
    <input type="button" id="btnClear" class="btn  btn-primary btn-clear"  value="Clear" />
    <input type="button" id="btnSubmit" class="btn btn-success btn-click" value="Validate" />
    
  </div>
</div>
  </div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
    <script type="text/javascript" src="http://testingprojec.googlecode.com/svn/trunk/JQuery-Bootstrap-Validation.js"></script>
    <script>
    $('.datepicker').datepicker({
        format: "dd/mm/yyyy"
    });</script>
</body>
    
</html>
